import Bottom from "../components/bottom/Bottom";
import { Top } from "../components/top/Top";
import { useState, useEffect } from "react";
import "./Package.css";
import { orderService } from "../../service/orderService";
import { common_utils } from "../../utils/utils";

export default function Package() {
  const [packages, setPackages] = useState({}); // 改为对象形式存储，key为orderId
  const [receivedStatus, setReceivedStatus] = useState({}); // 改为对象形式存储接收状态

  useEffect(() => {
    // 调用后端接口获取包裹数据
    orderService.getPackages(common_utils.getUsername(), (response) => {
      if (response.data) {
        setPackages(response.data);
        
        // 初始化接收状态为false
        const initialStatus = {};
        Object.keys(response.data).forEach(orderId => {
          initialStatus[orderId] = false;
        });
        setReceivedStatus(initialStatus);
      }
    });
  }, []);

  const handleReceivePackage = (orderId) => {
    setReceivedStatus(prev => ({
      ...prev,
      [orderId]: true
    }));

    orderService.receivePackage(common_utils.getUsername(), orderId, (response) => {
      
    });
  };

  return (
    <>
      <Top />
      <div className="package-container">
        <h1>Package Items</h1>
        {Object.keys(packages).length === 0 ? (
          <p>暂无包裹信息</p>
        ) : (
          <table className="package-table">
            <thead>
              <tr>
                <th>Package</th>
                <th>Item ID</th>
                <th>Quantity</th>
                <th>Image</th>
              </tr>
            </thead>
            <tbody>
              {Object.entries(packages).map(([orderId, pkgItems]) => [
                // 包裹物品行
                ...pkgItems.map((item, itemIndex) => (
                  <tr key={`${orderId}-${item.itemId}`}>
                    {itemIndex === 0 && (
                      <td 
                        rowSpan={pkgItems.length + 1}
                        className="package-number"
                      >
                        Package #{orderId}
                      </td>
                    )}
                    <td>{item.itemId}</td>
                    <td>{item.quantity}</td>
                    <td>
                      <img
                        src={require(`../../images/${item.image}`)}
                        alt={`Item ${item.itemId}`}
                        className="item-image"
                      />
                    </td>
                  </tr>
                )),
                // 接收按钮行
                <tr key={`btn-${orderId}`}>
                  <td colSpan={3} className="receive-cell">
                    <button
                      className={`receive-btn ${
                        receivedStatus[orderId] ? "received" : ""
                      }`}
                      onClick={() => handleReceivePackage(orderId)}
                      disabled={receivedStatus[orderId]}
                    >
                      {receivedStatus[orderId] ? "已收到" : "确认收到包裹"}
                    </button>
                  </td>
                </tr>
              ])}
            </tbody>
          </table>
        )}
      </div>
      <Bottom />
    </>
  );
}